<template>
  <div id="css">
    <div class="left">
      <ul>
        <li
          class="title"
          v-for="(item1, index1) in csslist"
          :key="index1"
          :class="{ active: cla === index1 }"
          :data-flag="index1"
          @click="
            cla = index1;
            changeflag(index1);
          "
        >
          {{ item1.title }}
          <ul class="items">
            <li
              class="item"
              v-for="(item2, index2) in item1.CSS"
              :key="index2"
            >
              {{ item2.title }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="main">
      <css-main v-model="flag"> </css-main>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import cssMain from "./css_main";

export default {
  data() {
    return {
      csslist: [],
      flag:1,
      cla:"CSS2_1"
    };
  },
  components: {
    cssMain,
  },
  created() {
    this.getcssList();
  },
  methods: {
    changeflag(val){
      val = val.slice(5,7);
      this.flag=parseInt(val);
    },
    getcssList() {
      axios({
        url: "/data/CssDocument.json",
        method: "get",
      }).then((res) => {
        this.csslist = res.data;
        console.log(this.csslist);
      });
    },
  },
};
</script>

<style>
</style>